<script setup lang="ts">
import { computed, ref, onMounted, markRaw } from "vue";
import ReCol from "@/components/ReCol";

import { useUserStoreHook } from "@/store/modules/user";

import Beginner from "./components/beginner/index.vue"
import CustomerFollow from "./components/customerFollow/index.vue"
import TradeProduct from "./components/tradeProduct/index.vue"
import PhoneCallTable from "./components/PhoneCallTable/index.vue"
import PhoneCall from "./components/phoneCall/index.vue"
import HelpDocument from "./components/helpDocument/index.vue"
import CompanyInfo from "./components/companyInfo/index.vue"
import NoticeInfo from "./components/noticeInfo/index.vue"
import ConversionRanking from "./components/conversionRanking/index.vue"
import SuccessfulCall from "./components/successfulCall/index.vue"
onMounted(() => {
  // connectWebSocket();
  // setInterval(sendHeartbeat,30000);//发送心跳
  // setInterval(checkConnectionStatus,5000);//检查WebSocket状态
});
//-----------------------1.长连接控制-----------------------

//1.1相关物料
//1.1.1WebSocket 实例
let ws=null;
//1.1.2重连超时控制
let reconnectTimeout=null;

//1.2建立socket连接
const connectWebSocket=() => {
  ws=new WebSocket("ws://47.111.143.23:2346");
  ws.onopen=()=>{
    ws.send(JSON.stringify({action:"connection_mark",data:"1753000597@bqq"}));
    console.log("WebSocket 连接已建立");
  };
  ws.onmessage=(event)=>{
    console.log(event.data);
  };
  ws.onerror=(error)=>{
    console.error("WebSocket 发生错误", error);
  };
  ws.onclose=(event)=>{
    console.log("WebSocket 连接已关闭", event.code);
  };
};

//1.3处理 WebSocket 连接断开后的重连
const handleReconnect=()=>{
  if(reconnectTimeout){// 如果已经在重连，避免重复重连
    return;
  }
  reconnectTimeout=setTimeout(()=>{
    console.log("正在尝试重新连接 WebSocket...");
    connectWebSocket();
    reconnectTimeout=null; // 重连后清除重连超时
  },5000); // 5 秒后重连
};

//1.4发送心跳包
const sendHeartbeat=()=>{
  if(ws&&ws.readyState==WebSocket.OPEN){
    ws.send(JSON.stringify({action:"heartbeat",data:'heartbeat'}));
    console.log('发送心跳')
  }
};

//1.5检查WebSocket连接状态
const checkConnectionStatus=()=>{
  if(ws.readyState===WebSocket.OPEN){
    console.log("WebSocket 连接正常");
  }else if(ws.readyState===WebSocket.CONNECTING){
    console.log("WebSocket 正在连接...");
  }else if(ws.readyState===WebSocket.CLOSING){
    console.log("WebSocket 连接正在关闭...");
  }else if(ws.readyState===WebSocket.CLOSED){
    console.log("WebSocket 连接已关闭，准备重连");
    handleReconnect();
  }
};



defineOptions({
  name: "Welcome"
});

/** 页面元素权限 */
const auth_element = computed(() => {
  return useUserStoreHook()?.auth_element;
});

// console.log(JSON.parse(auth_element.value))

/** 筛选完-页面元素权限 */
const filterElement = ref(null)
if (auth_element.value) {
  // 查询 onpage 为 "/home" 的所有数据
  const homeData = Object.entries(JSON.parse(auth_element.value)).filter(([key, value]) => value.onpage === "/home");
  // 转换为对象形式
  const homeDataObj = Object.fromEntries(homeData);
  // console.log(homeDataObj);
  filterElement.value = homeDataObj;
}
</script>

<template>
  <div>
    <el-row :gutter="12" justify="space-around">
      <!-- 新手教程 -->
      <Beginner v-if="filterElement?.beginnerTutorial" :element="filterElement?.beginnerTutorial"></Beginner>

      <re-col
        v-motion
        :value="18"
        :xs="24"
        :sm="24"
        :md="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 400
          }
        }"
      >
        <el-row :gutter="0" justify="space-around">
          <!-- 客户跟进概览 -->
          <CustomerFollow v-if="filterElement?.count_khgj" :element="filterElement?.count_khgj"></CustomerFollow>

          <!-- 成交产品概况 -->
          <TradeProduct v-if="filterElement?.count_cpcj" :element="filterElement?.count_cpcj"></TradeProduct>

          <!-- 电话拨打概况 -->
          <PhoneCallTable v-if="filterElement?.count_dhbd_bb" :element="filterElement?.count_dhbd_bb"></PhoneCallTable>
          <PhoneCall v-if="filterElement?.count_dhbd_hd" :element="filterElement?.count_dhbd_hd"></PhoneCall>

          <!-- 组内客户转化排名 -->
          <ConversionRanking v-if="filterElement?.count_zhpm" :element="filterElement?.count_zhpm"></ConversionRanking>

          <!-- 组内成功拨打排名 -->
          <SuccessfulCall v-if="filterElement?.count_bdpm" :element="filterElement?.count_bdpm"></SuccessfulCall>
        </el-row>
      </re-col>

      <re-col
        v-motion
        :value="6"
        :xs="24"
        :sm="24"
        :md="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 480
          }
        }"
      >
        <el-row :gutter="12" justify="space-around">
          <!-- 操作帮助文档 -->
          <HelpDocument v-if="filterElement?.helpDocument"></HelpDocument>

          <!-- 苏州优启 -->
          <CompanyInfo v-if="filterElement?.company_home"></CompanyInfo>

          <!-- 公告列表 -->
          <NoticeInfo v-if="filterElement?.announcement"></NoticeInfo>
        </el-row>
      </re-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-card) {
  --el-card-border-color: none;

  /* 解决概率进度条宽度 */
  .el-progress--line {
    width: 85%;
  }

  /* 解决概率进度条字体大小 */
  .el-progress-bar__innerText {
    font-size: 15px;
  }

  /* 隐藏 el-scrollbar 滚动条 */
  .el-scrollbar__bar {
    display: none;
  }

  /* el-timeline 每一项上下、左右边距 */
  .el-timeline-item {
    margin: 0 6px;
  }
}

.main-content {
  margin: 12px 12px 0 !important;
}
</style>
